<script setup>
import {View} from '@element-plus/icons-vue'
import request from "@/utils/request";
import {reactive, ref,nextTick,} from "vue";
import router from "@/router"

function filterTime(time) {
  var date = new Date(time);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  var h = date.getHours();
  h = h < 10 ? "0" + h : h;
  var minute = date.getMinutes();
  minute = minute < 10 ? "0" + minute : minute;
  var s = date.getSeconds();
  s = s < 10 ? "0" + s : s;
  return y + "-" + m + "-" + d  + " " + h + ":" + minute;
}

const state = reactive({
  hots: [],
  dynamics: [],
  news: []
})
const pageNum = ref(1)
const pageSize = ref(5)
const total = ref(0)

const load = () => {
  request.get('/dynamic/page', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
  }).then(res => {
    state.dynamics = res.data.records
    total.value = res.data.total
  })


  request.get('/dynamic/hot').then(res => {
    state.hots = res.data
  })
  request.get('/news').then(res => {
    state.news = res.data
  })

}
load()

// 获取轮播图图片
const getUrl = (name) => {
  return new URL(`../assets/imgs/${name}`, import.meta.url).href
}

const imgs = ref([
  getUrl('lunbo1.jpg'),
  getUrl('lunbo2.jpg'),
  getUrl('lunbo3.jpg'),
  getUrl('lunbo4.jpg'),
  getUrl('lunbo5.jpg'),
  getUrl('lunbo6.jpg'),
  getUrl('lunbo7.jpg'),
  getUrl('lunbo8.jpg'),
  getUrl('lunbo9.jpg'),
  getUrl('lunbo10.png'),

])


const refreshNews = () => {
  // 刷新新闻
  request.get('/news').then(res => {
    state.news = res.data
  })
}


</script>

<template>
  <div>
      <!--  1 轮播图热门动态 -->
    <div style="display: flex;">
      <div style="width: 75%;">
        <!--  轮播图-->
        <el-carousel :interval="5000" arrow="always" height="400px" style="border-radius: 1%">
          <el-carousel-item v-for="item in imgs" :key="item" >
            <img :src="item" alt="" style="width: 100%; height: 100%">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="width: 25%;  margin-left: 10px;">
        <!--  热门动态-->
        <el-card style="height: 400px;">
          <div style="padding-bottom: 10px; border-bottom: 1px solid #ccc; font-size: 20px; font-weight: bold; color: SlateBlue">热门动态</div>
          <div v-for="(item, index) in state.hots" :key="item.id" style="margin: 14px 0; display: flex; cursor: pointer;padding-top: 3px"
               @click="router.push('/detail?id=' + item.id)">
             <!--   overflowShow 单行超出显示省略号 -->
            <div class="overflowShow" style="flex: 1;"><span style="color: goldenrod">{{ index + 1 }}</span><span style="margin-left: 10px">{{ item.name }}</span></div>
            <div style="width: 60px; display: flex; align-items: center"><img src="@/assets/imgs/hot.svg" alt="" style="width: 20px;"><span style="color: red"> {{ item.hot }}</span></div>
          </div>
        </el-card>
      </div>
    </div>

    <div style="display: flex; margin: 10px 0;">
      <!--  2 交友动态 -->
      <div style="width: 75%; color: #666">

        <el-card>
          <div v-for="item in state.dynamics" :key="item.id" style="border-bottom: 1px solid #ddd; padding: 20px; cursor: pointer"
               @click="router.push('detail?id=' + item.id)">
            <!--  2.1 动态用户信息 -->
            <div style="display: flex">
              <div style="width: 50%; display: flex">
                <img v-if="item.user" :src="item.user.avatar" alt="" style="width: 40px; height: 40px; border-radius: 50%">
                <div style="flex: 1; line-height: 40px; margin-left: 10px; " v-if="item.user" >
                  <span style="font-weight: bold; font-size: 16px" v-if="item.user.username">{{ item.user.username}}</span>
                  <!--                -->
                  <span style="margin-left: 10px; font-size: 12px; color: #888">{{  filterTime(item.createTime)   }}</span>
                  <span style="margin-left: 10px; font-size: 12px; color: #888">{{  item.user.address }}</span>
                </div>
              </div>
              <div style="flex: 1;">

              </div>
            </div>
            <!--  2.2 动态简介 -->
            <div style="margin: 10px 0">
              <div style="color: #000; font-size: 18px; font-weight: bold">{{ item.name }}</div>
            </div>

            <div style="margin: 10px 0">
              <div style="color: #666; font-size: 14px">{{ item.dercription }}</div>
            </div>

            <div style="margin: 10px 0">
              <div><img :src="item.img " alt="" style="width: 40%; border-radius: 10px"></div>
            </div>
            <!--  2.3 动态点赞收藏 -->
            <div style="display: flex">
              <div style="width: 50%">
                <el-tag style="margin-right: 10px" v-for="tag in item.tags" :key="tag"># {{ tag }} </el-tag>
              </div>
              <div style="width: 50%; text-align: right; font-size: 16px; color: #888">
                  <span>
                  <el-icon :size="20" style="top: 4px"><View /></el-icon>
                  <span style="margin-left: 3px">{{ item.view }}</span>
                </span>
                <span style="margin-left: 7px">
                  <el-icon :size="20" style="top: 4px"><img style="width: 20px" src="@/assets/imgs/点赞.svg" alt=""></el-icon>
                  <span style="margin-left: 3px">{{ item.praiseCount }}</span>
                </span>
                <span style="margin-left: 10px">
                  <el-icon :size="20" style="top: 4px"><Star /></el-icon>
                  <span style="margin-left: 3px">{{ item.collectCount }}</span>
                </span>
                <span style="margin-left: 10px">
                  <el-icon :size="20" style="top: 4px"><ChatLineSquare /></el-icon>
                  <span style="margin-left: 3px">{{ item.commentCount }}</span>
                </span>
              </div>
            </div>

          </div>
        </el-card>

        <div style="display: flex ">
          <div style="width: 100%">
            <el-card style="margin: 10px 0; background-color: white;">
              <el-pagination
                  @current-change="load"
                  @size-change="load"
                  v-model:current-page="pageNum"
                  v-model:page-size="pageSize"
                  background
                  layout="total, prev, pager, next"
                  :total="total"
              />

            </el-card>
          </div>
        </div>


      </div>
      <!-- 3  交友资讯-->
      <div style="width: 25%; margin-left: 10px;">
        <el-card>
          <div style="padding-bottom: 10px; border-bottom: 1px solid #ccc; ">
            <span style="font-size: 20px; font-weight: bold; color: SlateBlue"> 交友资讯</span>
            <span style="float: right; top: 5px; font-size: 14px; color: #888;cursor: pointer" class="refresh" @click="refreshNews"><el-icon style="top: 2px"><Refresh /></el-icon> 换一换</span>
          </div>
          <div v-for="(item, index) in state.news" :key="item.id" style="margin: 10px 0">
            <div style="cursor: pointer;flex: 1; display: flex;"  @click="router.push('/newsDetail?id=' + item.id)">
              <div style="width: 80%" class="overflowShow"><span style="margin-left: 10px">{{ item.name }}</span></div>
              <div style="width: 20%;text-align: right"><span style="margin-left: 10px;text-align: right;">{{ item.monthTime}}</span></div>
            </div>

          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 只显示2行文本，多余的用省略号代替 */
.content {
  margin: 10px 0;
  line-height: 25px;
  text-align: justify;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
refresh:hover {
  cursor: pointer;
}
:deep(.el-card__body) {
  padding: 10px !important;
}
</style>
